<template>
  <vxe-modal
    title="查看流水填报详情"
    v-model="dialogVisible"
    v-if="dialogVisible"
    :loading="loading"
    width="55%" showFooter esc-closable show-zoom resize>

    <div style="height: 30vh; overflow-y: auto;">
      <el-card class="box-card" shadow="never" :body-style="{ padding: '10px',backgroundColor: '#bfcdda' }">
        <!-- 基本资料 -->
        <el-card class="box-card" shadow="hover">
          <el-descriptions class="margin-top" :column="2" size="medium" border
                           :contentStyle="content_style" :labelStyle="label_style">
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  项目编号：
                </div>
              </template>
              {{ lstbData.xmBh }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  项目名称：
                </div>
              </template>
              {{ lstbData.xmName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  申请部门：
                </div>
              </template>
              {{ lstbData.sqBm }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  支出选项：
                </div>
              </template>
              {{ lstbData.zcXx }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  项目实施状态：
                </div>
              </template>
              {{ lstbData.xmSsZt }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  研发成果：
                </div>
              </template>
              {{ lstbData.yfCg }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  研发成果证书号：
                </div>
              </template>
              {{ lstbData.yfCgZsh }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        <br>

      </el-card>
    </div>

    <div slot="footer" class="dialog-footer dialog-footer-center">
      <el-button @click="dialogVisible=false">关闭</el-button>
    </div>
  </vxe-modal>
</template>
<script>

import {getLstb} from "@/api/fztz/lstb";

export default {
  name: "LsTbXq", //流水填报详情组件
  data() {
    return {
      loading: false,
      lstbData: [], //流水填报基本资料
      lstbId: null, //流水填报主键ID
      dialogVisible: false,
      content_style: {
        // 解决不对齐的问题
        'width': "400px",
        // 排列第二行
        'word-break': 'break-all',
        // 'background-color': '#f3f7ff'
      },
      label_style: {
        // 解决不对齐的问题
        'width': "250px",
        // 排列第二行
        'word-break': 'break-all',
      },
    };
  },
  created() {
  },
  methods: {
    // 文件下载处理
    handleDownload(row) {
      const resource = row.fileName;
      // 默认方法
      this.$download.resource(resource);
    },
    getFileNames(row) {
      // 从路径中提取文件名
      return row.fileName.split('/').pop(); // 返回文件名部分
    },
    handleOpen(row) {
      this.loading = true;
      this.lstbId = row.lstbId
      this.dialogVisible = true
      this.getLsTbData()
      setTimeout(() => {
        this.loading = false
      }, 1000)
    },
    //获取详情数据
    getLsTbData() {
      const lstbId = this.lstbId
      getLstb(lstbId).then(res => {
        this.lstbData = res.data
      })
    },


  }
};
</script>

<style scoped>
.right-align-label {
  text-align: right;
}
</style>
